<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝下拉菜单</title>
<style type="text/css">

#clickOpen{
	width: 80px;
	height: 35px;
	padding: 0px 20px;
	background-color: #e3e3e3;
	line-height: 35px;
	text-align: center;
	cursor: pointer;
}
	
.list{
	list-style: none;
	padding: 0;
	display: none;
	transition: all .3s line;
;








</style>
</head>
<body>

	<div id="clickOpen">点击打开</div>

	<ul class="list">
		<li class="item">收藏的宝贝</li>
		<li class="item">收藏的店铺</li>
	</ul>
	



<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">


/*$(document).ready(function(){

	$("#clickOpen").click(function(){
		$(".list").fadeToggle();
	})


})


*/




var clickBtn=document.getElementById('clickOpen');
var list=document.getElementsByClassName("list")[0];
var isOpen=false;

	clickBtn.addEventListener('click',function(){
		isOpen=!isOpen;

			if(isOpen){
				clickBtn.innerHTML="点击隐藏";
				list.style.display="inline-block";
			} else{
				clickBtn.innerHTML="点击打开";
				list.style.display='none';
			}

	})



</script>


	
</body>
</html>